<template>
  <view class="Collection">
    <view class="top">

      <view class="img">
        <image src="../../static/message/green-shoukuan.png" class="shoukuan" mode=""></image>
      </view>
      <view class="text1">
        您已收款
      </view>
      <view class="money">
        ￥10.35
      </view>
      <view class="yue">
        账户余额
      </view>
    </view>
    <view class="illustrate">
      <view class="text">
        转账声明
      </view>
      <view class="text2">
        订单
      </view>
    </view>
    <view class="illustrate">
      <view class="text">
        转账时间
      </view>
      <view class="text2">
        2022年8月30日17:17:53
      </view>
    </view>
    <view class="illustrate">
      <view class="text">
        收款时间
      </view>
      <view class="text2">
        2022年8月30日17:27:53
      </view>
    </view>
    <!-- <view class="button">
      <u-button type="error" text="收款" class="buttoncon"></u-button>
      <view class="text">
        1天内未确认,将退还给对方。
        <text>退还</text>
      </view>
    </view> -->
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .Collection {
    padding: 120rpx 0 0;
    width: 90vw;
    margin: auto;

    .top {
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid #ccc;
      margin-bottom: 15rpx;

      .img {
        margin: auto;
        text-align: center;
        margin-bottom: 20rpx;
      }

      .shoukuan {
        width: 106rpx;
        height: 106rpx;
      }

      .text1 {
        font-size: 35rpx;
        text-align: center;
      }

      .money {
        color: rgb(51, 51, 51);
        margin-top: 35rpx;
        font-family: Binance PLEX;
        text-align: center;
        font-size: 60rpx;
        font-weight: bold;
        margin-bottom: 30rpx;
      }

      .yue {
        text-align: center;
        color: rgb(0, 150, 250);
        margin-left: 20rpx;
        font-family: Noto Sans SC;
        font-size: 40rpx;
        font-weight: 400;
      }
    }

    .illustrate {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
    }

    .button {
      margin-top: 63%;

      .text {
        text-align: center;
      }

      text {
        margin-left: 5rpx;
        color: #0096FA;
      }
    }

    .buttoncon {
      width: 63%;
      margin-bottom: 30rpx;
    }

  }
</style>